<template>
  <intro-view :usage="usage">
    <ul>
      <li data-clipboard-text="icon-loading">
        <ui-icon icon="icon-loading" fontSize="30px" color="#00F"></ui-icon>
        <p>icon-loading</p>
      </li>
      <li data-clipboard-text="icon-snow-loading">
        <ui-icon icon="icon-snow-loading" rotate fontSize="30px" color="#00F"></ui-icon>
        <p>icon-loading</p>
      </li>
      <li data-clipboard-text="icon-roundclose">
        <ui-icon icon="icon-roundclose" fontSize="30px" color="#00F"></ui-icon>
        <p>icon-roundclose</p>
      </li>
      <li data-clipboard-text="icon-roundclosefill">
        <ui-icon icon="icon-roundclosefill" fontSize="30px" color="#00F"></ui-icon>
        <p>icon-roundclosefill</p>
      </li>
      <li data-clipboard-text="icon-my">
        <ui-icon icon="icon-my" fontSize="30px" color="#00F"></ui-icon>
        <p>icon-my</p>
      </li>
      <li data-clipboard-text="icon-myfill">
        <ui-icon icon="icon-myfill" fontSize="30px" color="#00F"></ui-icon>
        <p>icon-myfill</p>
      </li>
      <li data-clipboard-text="icon-check">
        <ui-icon icon="icon-check" fontSize="30px" color="#00F"></ui-icon>
        <p>icon-check</p>
      </li>
      <li data-clipboard-text="icon-close">
        <ui-icon icon="icon-close" fontSize="30px" color="#00F"></ui-icon>
        <p>icon-close</p>
      </li>
      <li data-clipboard-text="icon-refresh-arrow">
        <ui-icon icon="icon-refresh-arrow" fontSize="30px" color="#00F"></ui-icon>
        <p>icon-refresh-arrow</p>
      </li>
      <li data-clipboard-text="icon-back-top">
        <ui-icon icon="icon-back-top" fontSize="30px" color="#00F"></ui-icon>
        <p>icon-back-top</p>
      </li>
    </ul>
  </intro-view>
</template>

<script>
  import usage from './usage.md'
  import ClipboardJS from 'clipboard'
  export default {
    data () {
      return {
        usage
      }
    },
    methods: {
    },
    mounted () {
      this.$nextTick(() => {
        let clipboard = new ClipboardJS('li')
        clipboard.on('success', function(e) {
          alert(`${e.text} copyed!`)
        })
      })
    }
  }
</script>

<style lang="scss" scoped>
  li {
    display: inline-block;
    text-align: center;
    float: left;
    width: 105px;
    height: 80px;
    border: 1px dashed #f233f1;
    p {
      height: 50px;
    }
  }
</style>
